import { formatCount, convertCurrency } from '@/utils/common.js';

function hotelViews (info) {
  var str = convertCurrency(info.receivableAmount)
  var moneyArray = []
  var index = 0
  for (var item of str) {
    moneyArray.push({
      type: 'text',
      text: item,
      css: {
        fontWeight: (index + 2 >= str.length || index % 2) ? '400' : 'bold',
        paddingLeft: '6rpx'
      }
    })
    index++
  }

  var views = {
    css: {
      backgroundColor: '#FFFFFF',
      width: '702rpx',
      padding: '15rpx',
      boxSizing: "border-box",
      fontSize: '14rpx',
      'line-height': '17rpx'
    },
    views: [
    // 标题
    {
        type: 'view',
        css: {
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          flexDirection: 'column',
          fontWeight: 'bold',
          textAlign: 'center',
          marginBottom: '28rpx',
          position: 'relative',
          width: '654rpx'
        },
        views: [
          {
            type: 'view',
            css: {
              height: '34rpx',
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              position: 'relative',
              fontSize: '22rpx',
              marginTop: '10rpx'
            },
            views: [
              {
                type: 'text',
                text: info.repairShopName,
              }]
          },
          {
            type: 'view',
            css: {
              height: '6rpx',
              color: 'transparent',
              border: '0 solid #333333',
              borderBottomWidth: '1rpx',
              borderTopWidth: '1rpx',
              'box-sizing': 'border-box',
              position: 'relative',
              fontSize: '22rpx',
            },
            views: [
              {
                type: 'text',
                text: info.repairShopName,
              }]
          },
          {
            type: 'view',
            css: {
              top: 0,
              left: 0,
              position: 'absolute',
            },
            views: [
              {
                type: 'image',
                src: info.extend.logo  ? (info.extend.logo += '?imageView2/2/h/84') : '',
                css: {
                  'flex-shrink': 0,
                  height: '56rpx',
                  // width: '56rpx',
                  marginLeft: '28rpx'
                }
              }
            ]
          }, {
            type: 'view',
            css: {
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'flex-end',
              top: '24rpx',
              right: 0,
              position: 'absolute',
              color: '#875A38'
            },
            views: [
              {
                type: 'text',
                text: info.number,
                css: {
                  fontWeight: 'bold'
                }
              }
            ]
          }
        ]
      },
      // top 行
      {
        type: 'view',
        css: {
          width: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          height: '34rpx',
          marginBottom: '6rpx'
        },
        views: [
          {
            type: 'view',
            css: {
              display: 'flex',
              alignItems: 'flex-start',
            },
            views: [
              {
                type: 'text',
                text: '房号：'
              },
              {
                type: 'text',
                text: info.expenseDetails[0].value,
                css: {
                  fontWeight: 'bold'
                }
              }
            ]
          }, {
            type: 'view',
            css: {
              display: 'flex',
              alignItems: 'flex-start',
              justifyContent: 'space-between'
            },
            views: [
              {
                type: 'text',
                text: '时间：',
                css: {
                  'flex-shrink': 0,
                }
              },
              {
                type: 'text',
                text: info.expenseDetails && (info.expenseDetails[1].value[0] + '至' + info.expenseDetails[1].value[1] + ' 12:00'),
                css: {
                  fontWeight: 'bold'
                }
              }
            ]
          }
        ]
      },
      // table
      {
        type: 'view',
        css: {
          border: '2rpx solid #333333',
          display: 'flex',
          alignItems: 'flex-start',
          justifyContent: 'space-between',
          marign: '4rpx 0 8rpx 0',
        },
        views: [
          // table 左
          {
            type: 'view',
            css: {
              width: '550rpx',
              display: 'flex',
              alignItems: 'center',
              'flex-wrap': 'wrap',
              'flex-shrink': 0,
              justifyContent: 'space-between'
            },
            views: [
              // 第一行
              {
                type: 'view',
                css: {
                  width: '179rpx',
                  display: 'flex',
                  alignItems: 'center',
                  padding: '0 12rpx 0 12rpx',
                  'box-sizing': 'border-box',
                  height: '34rpx',
                  border: '0 solid #333333',
                  borderBottomWidth: '1rpx',
                  borderRightWidth: '1rpx',
                },
                views: [
                  {
                    type: 'text',
                    text: '姓名：'
                  },
                  {
                    type: 'text',
                    text: info.customer.name,
                    css: {
                      fontWeight: 'bold'
                    }
                  }
                ]
              }, {
                type: 'view',
                css: {
                  width: '370rpx',
                  display: 'flex',
                  alignItems: 'center',
                  padding: '0 12rpx 0 12rpx',
                  'box-sizing': 'border-box',
                  height: '34rpx',
                  border: '0 solid #333333',
                  borderBottomWidth: '1rpx',
                  borderRightWidth: '1rpx',
                },
                views: [
                  {
                    type: 'text',
                    text: '家庭住址：',
                    css: {
                      'flex-shrink': 0,
                    }
                  },
                  {
                    type: 'text',
                    text: info.address,
                    css: {
                      fontWeight: 'bold',
                      flex: 1,
                      'line-height': '14rpx'
                    }
                  }
                ]
              },
              // 第二行
              {
                type: 'view',
                css: {
                  width: '179rpx',
                  display: 'flex',
                  alignItems: 'center',
                  padding: '0 12rpx 0 12rpx',
                  'box-sizing': 'border-box',
                  height: '34rpx',
                  border: '0 solid #333333',
                  borderBottomWidth: '1rpx',
                  borderRightWidth: '1rpx',
                },
                views: [
                  {
                    type: 'text',
                    text: '电话：',
                    css: {
                      'flex-shrink': 0,
                    }
                  },
                  {
                    type: 'text',
                    text: info.customer.phone,
                    css: {
                      fontWeight: 'bold'
                    }
                  }
                ]
              },
              {
                type: 'view',
                css: {
                  width: '370rpx',
                  display: 'flex',
                  alignItems: 'center',
                  padding: '0 12rpx 0 12rpx',
                  'box-sizing': 'border-box',
                  height: '34rpx',
                  border: '0 solid #333333',
                  borderBottomWidth: '1rpx',
                  borderRightWidth: '1rpx',

                },
                views: [
                  {
                    type: 'text',
                    text: '身份证号：',
                    css: {
                      'flex-shrink': 0,
                    }
                  },
                  {
                    type: 'text',
                    text: info.customer.idNumber || '',
                    css: {
                      fontWeight: 'bold',
                      'line-height': '16rpx'
                    }
                  }
                ]
              },
              // 第三行
              {
                type: 'view',
                css: {
                  width: '179rpx',
                  display: 'flex',
                  alignItems: 'center',
                  padding: '0 12rpx 0 12rpx',
                  'box-sizing': 'border-box',
                  height: '34rpx',
                  border: '0 solid #333333',
                  borderBottomWidth: '1rpx',
                  borderRightWidth: '1rpx',
                  'flex-shrink': 0,
                },
                views: [
                  {
                    type: 'text',
                    text: '住期：',
                    css: {
                      'flex-shrink': 0,
                    }
                  },
                  {
                    type: 'text',
                    text: Math.ceil((new Date(info.expenseDetails[1].value[1]).getTime() - new Date(info.expenseDetails[1].value[0]).getTime()) / 3600 / 24 / 1000),
                    css: {
                      fontWeight: 'bold'
                    }
                  }
                ]
              },
              {
                type: 'view',
                css: {
                  width: '184rpx',
                  display: 'flex',
                  alignItems: 'center',
                  padding: '0 12rpx 0 12rpx',
                  'box-sizing': 'border-box',
                  height: '34rpx',
                  border: '0 solid #333333',
                  borderBottomWidth: '1rpx',
                  borderRightWidth: '1rpx',
                },
                views: [
                  {
                    type: 'text',
                    text: '房价：',
                    css: {
                      'flex-shrink': 0,
                    }
                  },
                  {
                    type: 'text',
                    text: '￥' + formatCount(info.expenseDetails[2].value),
                    css: {
                      fontWeight: 'bold'
                    }
                  }
                ]
              },
              {
                type: 'view',
                css: {
                  width: '186rpx',
                  display: 'flex',
                  alignItems: 'center',
                  padding: '0 12rpx 0 12rpx',
                  'box-sizing': 'border-box',
                  height: '34rpx',
                  border: '0 solid #333333',
                  borderBottomWidth: '1rpx',
                  borderRightWidth: '1rpx',

                },
                views: [
                  {
                    type: 'text',
                    text: '押金：',
                    css: {
                      'flex-shrink': 0,
                    }
                  },
                  // {
                  // 	type: 'text',
                  // 	text: '￥' + formatCount(info.expenseDetails[3].value),
                  // 	css: {
                  // 		fontWeight: 'bold',
                  // 		'line-height': '16rpx'
                  // 	}
                  // }
                ]
              },
              // 第四行
              {
                type: 'view',
                css: {
                  width: '300rpx',
                  display: 'flex',
                  alignItems: 'center',
                  padding: '0 12rpx 0 12rpx',
                  'box-sizing': 'border-box',
                  height: '34rpx',
                  border: '0 solid #333333',
                  borderBottomWidth: '1rpx',
                },
                views: [
                  {
                    type: 'text',
                    text: '合计金额：',
                    css: {
                      'flex-shrink': 0,
                    }
                  },
                  ...moneyArray
                ]
              },
              {
                type: 'view',
                css: {
                  width: '250rpx',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                  padding: '0 12rpx 0 12rpx',
                  'box-sizing': 'border-box',
                  height: '34rpx',
                  border: '0 solid #333333',
                  borderBottomWidth: '1rpx',
                  borderRightWidth: '1rpx',

                },
                views: [
                  {
                    type: 'text',
                    text: '单位 (盖章) 签名：',
                    css: {
                      'flex-shrink': 0,
                    }
                  },
                  info.extend.sealUrl ?
                    {
                      type: 'image',
                      src: info.extend.sealUrl,
                      css: {
                        'flex-shrink': 0,
                        height: '96rpx',
                      }
                    } : {},
                ]
              },
              // 第五行
              {
                type: 'view',
                css: {
                  width: '66rpx',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  'min-height': '100rpx',
                },
                views: [
                  {
                    type: 'view',
                    css: {
                      width: '40rpx',
                      height: '68rpx',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      backgroundColor: '#333333',
                      color: '#ffffff',
                      borderRadius: '20rpx',
                      'box-sizing': 'border-box',
                    },
                    views: [
                      {
                        type: 'text',
                        text: '注\n明',
                        css: {
                          fontSize: '16rpx',
                        }
                      },
                    ]
                  }

                ]
              },
              {
                type: 'view',
                css: {
                  width: '484rpx',
                  display: 'flex',
                  alignItems: 'center',
                  padding: '8rpx 0 8rpx 0',
                  'box-sizing': 'border-box',
                  border: '0 solid #333333',
                  borderRightWidth: '1rpx',
                  'min-height': '100rpx',
                },
                views: [
                  {
                    type: 'text',
                    text: info.extend.indicateInfo || ' ',
                    css: {
                      'line-height': '18rpx'
                    }
                  }
                ]
              }
            ]
          },
          // table 右
          {
            type: 'view',
            css: {
              width: '122rpx',
              display: 'flex',
              'flex-wrap': 'wrap',
              'flex-shrink': 0,
              flex: 1
            },
            views: [
              {
                type: 'view',
                css: {
                  width: '122rpx',
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center',
                  height: '34rpx',
                  border: '0 solid #333333',
                  borderBottomWidth: '1rpx',
                  'box-sizing': 'border-box',
                },
                views: [
                  {
                    type: 'text',
                    text: '备注/说明'
                  }
                ]
              },
              {
                type: 'view',
                css: {
                  width: '122rpx',
                  display: 'flex',
                  justifyContent: 'center',
                  height: '34rpx',
                  padding: '8rpx',
                  'box-sizing': 'border-box',
                },
                views: [
                  {
                    type: 'text',
                    text: info.remark || ' ',
                    css: {
                      'line-height': '18rpx',
                      fontWeight: 'bold'
                    }
                  }
                ]
              }
            ]
          }
        ]
      },
      // bottom 行
      {
        type: 'view',
        css: {
          width: '100%',
          display: 'flex',
          alignItems: 'center',
          height: '34rpx',
          marginTop: '4rpx'
        },
        views: [
          {
            type: 'view',
            css: {
              width: '208rpx',
              display: 'flex',
              alignItems: 'center',
            },
            views: [
              {
                type: 'text',
                text: '应收金额：',
                css: {
                  'flex-shrink': 0,
                }
              },
              {
                type: 'text',
                text: '￥' + formatCount(info.receivableAmount),
                css: {
                  fontWeight: 'bold'
                }
              }
            ]
          }, {
            type: 'view',
            css: {
              width: '296rpx',
              display: 'flex',
              alignItems: 'center',
            },
            views: [
              {
                type: 'text',
                text: '实收金额：',
                css: {
                  'flex-shrink': 0,
                }
              },
              {
                type: 'text',
                text: '￥' + formatCount(info.actualAmount),
                css: {
                  fontWeight: 'bold'
                }
              }
            ]
          }, {
            type: 'view',
            css: {
              width: '168rpx',
              display: 'flex',
              alignItems: 'center',
            },
            views: [
              {
                type: 'text',
                text: '欠款金额：',
                css: {
                  'flex-shrink': 0,
                }
              },
              {
                type: 'text',
                text: '￥' + formatCount(Math.max(Number(info.receivableAmount) - Number(info.actualAmount), 0)),
                css: {
                  fontWeight: 'bold'
                }
              }
            ]
          }
        ]
      },
      {
        type: 'view',
        css: {
          width: '100%',
          display: 'flex',
          alignItems: 'flex-start',
          height: '34rpx',
          marginTop: '4rpx'
        },
        views: [
          {
            type: 'view',
            css: {
              width: '208rpx',
              display: 'flex',
              alignItems: 'flex-start',
            },
            views: [
              {
                type: 'text',
                text: '联系电话：',
                css: {
                  'flex-shrink': 0,
                }
              },
              {
                type: 'text',
                text: info.phone,
                css: {
                  fontWeight: 'bold'
                }
              }
            ]
          },
          {
            type: 'view',
            css: {
              width: info.extend.customerSignSwitch ? '296rpx' : '464rpx',
              display: 'flex',
              alignItems: 'flex-start',
            },
            views: [
              {
                type: 'text',
                text: '地址：',
                css: {
                  'flex-shrink': 0,
                }
              },
              {
                type: 'text',
                text: info.shopAddress,
                css: {
                  fontWeight: 'bold',
                  // 'line-height': '16rpx'
                }
              }
            ]
          }, info.extend.customerSignSwitch ? {
            type: 'view',
            css: {
              width: '168rpx',
              display: 'flex',
              alignItems: 'flex-start',
            },
            views: [
              {
                type: 'text',
                text: '客户签字：',
                css: {
                  'flex-shrink': 0,
                }
              },
              {
                type: 'image',
                src: info.extend.customerSign += '?imageView2/2/h/40',
                css: {
                  height: '24rpx'
                }
              }
            ]
          } : {
          }
        ]
      },
    ]
  }
  views.views[2].views[0].views[6].views.push(
    {
      type: 'text',
      text: '￥' + formatCount(info.expenseDetails[3].value),
      css: {
        fontWeight: 'bold',
        'line-height': '16rpx'
      }

    })
  return views
}
export default hotelViews